<template>
  <div class="shareData">
    <div class="containerShare">
      <div class="searchTitle">
        <div class="title">
          <div class="back">
            <p>
              <span slot="quoteTitle">SAP(四川)产业赋能中心-共享资料</span>
            </p>
          </div>
          <div class="search">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              v-model="input"
              @change="getSearch()"
            ></el-input>
          </div>
          <div class="searchButton">
            <p @click="getSearch()">搜索</p>
          </div>
          <div class="searchButton">
            <p @click="cancel()">取消</p>
          </div>
        </div>
      </div>
      <div>
        <div class="content pc">
          <share-card :articleList="NasList"></share-card>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[this.limit]"
            :page-size="this.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          ></el-pagination>
        </div>
        <div class="content phone">
          <share-card :articleList="NasList"></share-card>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[this.limit]"
            :page-size="this.limit"
            layout="prev, pager, next"
            :total="totalCount"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import shareCard from "../../components/quoteHome/shareCard";
import searchTitle from "../../components/quoteHome/searchTitle";
import { ReqNas } from "../../request/index";
import { ReqSearchNas } from "../../request/index";
export default {
  components: {
    shareCard,
    searchTitle
  },
  data() {
    return {
      input: "",
      NasList: [],
      currentPage: 1,
      totalCount: 0,
      limit: 8,
      page: 1
    };
  },
  methods: {
    async getNas(page) {
      let data = {
        limit: this.limit,
        page: page
      };
      let resNas = await ReqNas(data);
      resNas.page.list.sort(function(a, b) {
        return a.gmtCreated < b.gmtCreated ? 1 : -1;
      });
      this.totalCount = resNas.page.totalCount;
      this.NasList = resNas.page.list;
    },
    async getSearch() {
      let data = {
        limit: 8,
        page: 1,
        title: this.input
      };
      let resSearch = await ReqSearchNas(data);
      // console.log(resSearch);
      this.NasList = resSearch.page.list;
    },
    cancel() {
      this.input = "";
    },
    handleCurrentChange(val) {
      this.getNas(val);
    }
  },
  async created() {
    await this.getNas();
  }
};
</script>

<style>
.shareData {
  width: 100%;
  background-color: rgb(245, 245, 245);
}
.shareData .searchTitle {
  margin-top: 30px;
}
.shareData .containerShare {
  width: 100%;
  margin: 0px auto;
  margin-top: 30px;
  /* padding-bottom: 50px; */
}
.el-divider--horizontal {
  margin: 0 !important;
}
.el-pagination {
  margin: 0 auto;
  width: fit-content;
  padding: 20px 0;
}
.phone {
  display: none;
}
.pc {
  width: 80%;
  margin: 0 auto;
}
@media screen and (max-width: 420px) {
  .pc {
    display: none;
  }
  .phone {
    display: block;
    width: 98%;
    margin: 0 auto;
  }
}
</style>